.domain-main-placeholder {
	.domain-management-header__children {
		@include placeholder(23%);

		@include breakpoint('>480px') {
			max-width: 60%;
			margin: 0 auto;
		}
	}
}

.domain-main-placeholder__card {
	p {
		@include placeholder(23%);
		margin-bottom: 0.5em;

		&:first-child {
			width: 35%;
		}
	}
}

.domain-management-form-footer,
.primary-domain__actions {
	border-top: 1px solid $gray-light;
	margin: 16px -16px -16px -16px;
	padding: 16px;
	display: flex;

	@include breakpoint('>480px') {
		padding: 24px;
		margin: 24px -24px -24px -24px;
	}

	@include breakpoint( '<480px' ) {
		flex-direction: column;
	}

	.button {
		margin: 0 0 0 15px;

		&.is-primary {
			margin: 0 0 15px 0;

			@include breakpoint('>480px') {
				margin: 0;
			}

			@include breakpoint( '<480px' ) {
				order: 1;
			}
		}

		@include breakpoint( '<480px' ) {
			width: 100%;
			order: 2;
		}
	}
}

.primary-domain__actions {
	justify-content: flex-end;
}

.domain-management-form-footer {
	justify-content: flex-start;
}

.domain-management-header__children {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.domain-management-list__notice {
	margin-bottom: 0;
}

.domain-management-list-item {
	&.busy {
		background-color: $gray-light;

		.domain-management-list-item__title,
		.domain-management-list-item__meta {
			color: lighten( $gray, 20% );
		}
	}
}

.domain-management-list-item__link {
	cursor: pointer;
	display: block;
	overflow: hidden;
}

.domain-management-list-item__title {
	display: block;
	color: $gray-dark;
	font-size: 14px;
	font-weight: 600;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: pre;
	max-width: 70%;
	font-family: $serif;

	@include breakpoint( ">480px" ) {
		font-size: 18px;
		font-weight: 700;
		max-width: none;
		white-space: normal;
	}
}

.domain-management-list-item__meta {
	font-size: 12px;
	color: $gray-text-min;
	min-height: 20px;
	text-overflow: ellipsis;
	overflow: hidden;

	@include breakpoint( ">480px" ) {
		text-transform: uppercase;
	}

	.notice {
		margin: 0 0 0 8px;
	}
}

.domain-management-list-item__type {
	vertical-align: middle;
}

.domain-management-list-item.is-placeholder {
	.domain-management-list-item__link {
		cursor: default;
	}

	.domain-management-list-item__title {
		@include placeholder(23%);
		width: 60%;
	}

	.domain-management-list-item__type {
		@include placeholder(23%);
		display: inline-block;
		width: 40%;
	}
}

input[type=radio].domain-management-list-item__radio {
	margin-left: -8px;
	margin-right: 12px;
	margin-top: 19px;
}

.domain-management-list-item__spinner {
	float: right;
	margin-top: 12px;
}

.domain-management-list-item__busy-message {
	text-transform: uppercase;
	color: darken( $gray, 20% );
	font-weight: 600;
	font-size: 12px;
	text-overflow: ellipsis;
	overflow: hidden;
	margin-top: 5px;


	@include breakpoint( ">480px" ) {
		float: right;
		margin-top: -11px;
		margin-right: 15px;
	}
}

.domain-management-primary-domain {

	.primary-domain-explanation {
		color: $gray-text-min;
		display: block;
		font-size: 13px;
		font-style: italic;
		margin: 5px 0;
	}

	.primary-domain-notice {
		background: lighten( $gray, 30% );
		font-size: 13px;
		color: $gray-dark;
		&::before {
			line-height: 1.5em;
		}
	}
}

.contacts-privacy-card {
	.settings-explanation {
		color: $gray-text-min;
		display: block;
		font-size: 13px;
		font-style: italic;
		margin: 5px 0;
	}

	.notice {
		clear: both;
		font-size: 12px;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.contact-display {
		h2 {
			background-color: $gray-light;
			border: 1px solid lighten( $gray, 30% );
			border-bottom: 0;
			color: $gray;
			font-size: 11px;
			font-weight: 600;
			line-height: 1;
			margin: 16px 0 0 0;
			padding: 8px 0;
			text-transform: uppercase;
			text-align: center;
		}

		.contact-display-content {
			border: 1px solid lighten( $gray, 30% );
			color: lighten( $gray-dark, 20% );
			font-size: 12px;
			line-height: 140%;
			margin: 0;
			padding: 16px;

			p {
				margin-bottom: 0;
			}
		}
	}
}

.domain-details-card {
	.flag {
		font-size: 11px;
		padding: 3px 10px 3px 5px;
		white-space: nowrap;

		.noticon {
			margin-right: 5px;
		}

		&.is-warning {
			cursor: pointer;
		}
	}
}

.domain-details-card__property {
	font-size: 13px;
	margin-bottom: 10px;
	@include clear-fix;

	&:last-of-type {
		margin-bottom: 0;
	}

	strong {
		float: left;
		width: 50%;
	}

	& > span {
		float: right;
		text-align: right;
		width: 50%;
	}
}

.domain-details-card__subscription-settings-button {
	margin-top: 15px;
	text-decoration: none;
	text-align: center;
	width: 100%;

	@include breakpoint( '>660px' ) {
		text-align: inherit;
		width: inherit;
	}
}

.domain-management__add-a-domain {
	text-align: center;

	a {
		color: $gray-text-min;
		display: block;
		font-size: 12px;
		padding: 20px 0;
		text-transform: uppercase;
	}
}

.edit-contact-info-privacy-enabled-card__settings-explanation {
	color: $gray-text-min;
	display: block;
	font-size: 13px;
	font-style: italic;
	margin: 5px 0;
}

.edit-contact-info__form-content {
	margin-bottom: 20px;
	overflow: auto;

	.edit-contact-info__form-field {
		margin-top: 15px;
		position: relative;

		input[type=text] {
			margin: 0;
		}

		select {
			width: 100%;
		}

		input[ disabled ], select[ disabled ] {
			cursor: not-allowed;
		}
	}

	.first-name {
		margin-top: 0;
	}

	@include breakpoint( ">660px" ) {
		.last-name {
			margin-top: 0;
		}

		.edit-contact-info__form-field {
			float: left;
			width: 100%;
		}

		.last-name,
		.phone,
		.postal-code {
			float: right;
		}

		.email,
		.first-name,
		.last-name,
		.phone {
			width: calc( 50% - 7px );
		}

		.city,
		.postal-code,
		.state {
			width: calc( 33% - 8px );
		}

		.state {
			margin-left: 14px;
		}
	}
}

.add-google-apps-card {
	&.card {
		padding: 0;
	}
}

.add-google-apps-card__product-details {
	clear: both;
	overflow: auto;
	padding: 16px;

	@include breakpoint( ">660px" ) {
		padding: 24px;
	}

	.button {
		display: block;
		margin: 20px 0 5px 0;

		@include breakpoint( "<660px" ) {
			text-align: center;
			width: 100%;
		}

		@include breakpoint( ">660px" ) {
			display: none;
		}
	}
}

.add-google-apps-card__description {
	box-sizing: border-box;

	@include breakpoint( ">660px" ) {
		float: left;
		margin-right: 5%;
		width: 60%;
	}

	p {
		clear: left;
		color: $gray-text-min;
		font-size: 12px;
		margin: 0;

		a {
			@include breakpoint( ">660px" ) {
				display: block;
			}
		}
	}
}

.add-google-apps-card__features {
	box-sizing: border-box;

	@include breakpoint( ">660px" ) {
		float: left;
		width: 35%;
	}

	@include breakpoint( "<660px" ) {
		margin-top: 20px;
	}
}

.add-google-apps-card__header {
	border-bottom: 2px solid lighten( $gray, 20% );
	overflow: auto;
	padding: 16px;
	position: relative;

	@include breakpoint( ">660px" ) {
		padding: 24px 24px 20px;
	}

	.button {
		@include breakpoint( ">660px" ) {
			position: absolute;
				top: 30px;
				right: 24px;
		}

		@include breakpoint( "<660px" ) {
			display: none;
		}
	}
}

.add-google-apps-card__product-logo {

	@include breakpoint( "<660px" ) {
		width: 236px;
	}

	@include breakpoint( ">660px" ) {
		float: left;
	}

	strong {
		background: url('/calypso/images/upgrades/g-suite-logo.png') no-repeat left;
		background-size: 73px;
		display: inline-block;
		height: 19px;
		margin: 0 6px 0 0;
		text-indent: -999999px;
		vertical-align: text-top;
		width: 73px;
	}
}

.add-google-apps-card__price {
	clear: both;
	margin: 0;

	.add-google-apps-card__price-per-user {
		display: inline-block;
		font-style: italic;

		strong {
			color: $gray-text-min;
			font-size: 15px;
			font-weight: 600;
		}

		span {
			color: $gray-text-min;
			font-size: 12px;
			font-weight: normal;
		}
	}

	.add-google-apps-card__price-separator {
		color: $gray;
		font-size: 12px;
	}

	.add-google-apps-card__billing-period {
		color: $gray-text-min;
		display: inline-block;
		font-size: 11px;
		font-style: italic;
		text-transform: uppercase;
	}
}

.add-google-apps-card__title {
	color: $gray-dark;
	font-size: 16px;
	line-height: 120%;
	margin: 0 0 10px 0;
}

.add-google-apps-card__file-storage,
.add-google-apps-card__professional-email {
	color: $gray-text-min;
	font-size: 12px;
	line-height: 130%;
	margin: 9px 0;

	&:first-child {
		margin-top: 5px;
	}

	&:last-child {
		margin-bottom: 0;
	}

	.noticon {
		color: $alert-green;
		margin-right: 5px;
	}
}

.dns__details,
.custom-nameservers-form__explanation,
.email-forwarding__explanation,
.site-redirect__explanation {
	display: block;
	margin-top: 5px;
	font-size: 13px;
	font-style: italic;
	color: $gray-text-min;
}

.email-forwarding-card,
.site-redirect-card {
	form label + input[type=text] {
		margin-bottom: 10px;
	}

	&.fetching input[type=text] {
		animation: pulse-light 0.8s ease-in-out infinite;
		background: lighten( $gray, 20% );
	}
}

.dns__add-new,
.dns__office365,
.email-forwarding__add-new {
	.email-forwarding__limit,
	.dns__form-content,
	.form-content {
		border-top: 1px solid $gray-light;
		overflow: visible;
		padding-top: 20px;
	}

	.is-hidden {
		display: none;
	}
}

.email-forwarding__form {
	margin-top: 0;

	@include breakpoint( '>480px' ) {
		margin-top: 15px;
	}
}

ul.email-forwarding__list {
	list-style: none;
	margin: 15px 0 0 0;
	padding: 0;

	li {
		border-top: 1px solid $gray-light;
		overflow: auto;
		padding: 10px 0;
		position: relative;

		span {
			font-size: 14px;
			line-height: 40px;

			@include breakpoint( '<660px' ) {
				font-size: 12px;
				line-height: 150%;
			}

			strong {
				color: $gray-text-min;
				font-weight: normal;

				&:first-child {
					@include breakpoint( '<660px' ) {
						display: block;
					}
				}

				@include breakpoint( '>660px' ) {
					font-weight: 600;
				}
			}

			em {
				color: $gray;
			}
		}

		.button {
			float: right;
			margin-top: -3px;
		}
	}
}

.email-forwarding__limit {
	font-size: 13px;
	color: $gray;
	line-height: 3em;
	margin-bottom: 15px;
}

.privacy-protection-card {

	&.card {
		padding: 0;
	}
}

.privacy-protection-card__header {
	border-bottom: 2px solid lighten( $gray, 20% );
	display: block;
	overflow: auto;
	padding: 16px 16px 20px;
	position: relative;

	@include breakpoint( ">660px" ) {
		padding: 24px;
	}

	h3 {
		font-size: 20px;
		font-weight: 600;

		@include breakpoint(">660px") {
			font-size: 28px;
			font-weight: 700;
			font-family: $serif;
		}
	}

	.button {
		display: none;
		position: absolute;
			right: 24px;
			top: 30px;

		@include breakpoint( ">660px" ) {
			display: block;
		}
	}
}

.privacy-protection-card__price {
	clear: both;
	font-style: italic;
	margin: 0;

	.privacy-protection-card__price-per-user {
		display: inline-block;
		color: $gray;
		font-size: 12px;

		strong {
			color: $gray-text-min;
			font-size: 15px;
			font-weight: 600;
		}
	}
}

.privacy-protection-card__content {
	background: $gray-light;
	clear: both;
	display: block;
	overflow: auto;
	padding: 16px;

	@include breakpoint( ">660px" ) {
		padding: 24px;
	}

	.button {
		cursor: pointer;
		display: block;
		margin: 20px 0 5px 0;
		text-align: center;
		width: 100%;

		@include breakpoint( ">660px" ) {
			display: none;
		}
	}
}

.privacy-protection-card__features {
	box-sizing: border-box;
	margin-top: 20px;

	@include breakpoint( ">660px" ) {
		float: left;
		margin-top: 0;
		width: 35%;
	}

	h5 {
		color: darken( $gray, 10% );
		font-size: 12px;
		line-height: 130%;
		margin: 9px 0;

		&:first-child {
			margin-top: 5px;
		}

		&:last-child {
			margin-bottom: 0;
		}

		.noticon {
			color: $alert-green;
			margin-right: 5px;
		}
	}
}

.privacy-protection-card__description {
	box-sizing: border-box;

	@include breakpoint( ">660px" ) {
		float: left;
		margin-right: 5%;
		width: 60%;
	}

	h2 {
		color: $gray-dark;
		font-size: 16px;
		font-weight: 400;
		line-height: 120%;
		margin: 0 0 10px 0;
	}

	p {
		clear: left;
		color: $gray;
		font-size: 12px;
		margin: 0;

		a {
			@include breakpoint( ">660px" ) {
				display: block;
			}
		}
	}
}

.add-email-addresses-card__inner {
	@include clear-fix;
}

.add-email-addresses-card__add-another-email-address-link {
	display: inline-block;
	font-size: 12px;
	margin-top: 5px;
}

.add-email-addresses-card__email-address-fieldsets {
	.add-email-addresses-card__email-address-fieldset {
		display: flex;
		flex-direction: column;
		margin-bottom: 10px;

		@include breakpoint( ">480px" ) {
			flex-direction: row;
		}

		&:last-of-type {
			margin-bottom: 0;
		}
	}

	select {
		border-bottom-width: 1px;
		border-top-left-radius: 0;

		@include breakpoint( "<480px" ) {
			border-top-right-radius: 0;
			margin-top: -1px;
		}

		@include breakpoint( ">480px" ) {
			border-bottom-left-radius: 0;
			margin-left: -1px;
		}
	}
}

.name-servers__dns {
	.name-servers__toggle {
		display: inline-block;
		float: right;
	}
	.name-servers__explanation {
		animation: appear 0.5s ease-in-out;
		color: $gray-text-min;
		font-size: 13px;
		font-style: italic;
		margin-bottom: 0;
	}
}

.custom-nameservers-form {
	animation: appear 0.5s ease-in-out;
}

.name-servers {
	.custom-nameservers-row {
		margin-top: 10px;
		position: relative;

		input[type=text] {
			padding-right: 38px;

			@include breakpoint( '<480px' ) {
				padding-right: 35px;
			}
		}

		.button {
			position: absolute;
			right: 7px;
			top: 8px;

			@include breakpoint( '<480px' ) {
				right: 4px;
			}
		}
	}

	.notice {
		font-size: 12px;
		margin-top: 10px;
		padding-right: 15px;
	}

	&.is-placeholder {
		.name-servers__dns {
			.name-servers__title {
				@include placeholder();
			}

			.name-servers__toggle {
				display: none;
			}

			.name-servers__explanation,
			.name-servers__explanation a {
				@include placeholder();
			}
		}

		.vertical-nav-item {
			.noticon {
				display: none;
			}

			span:nth-of-type( 2 ) {
				@include placeholder();
			}
		}
	}
}

.dns__list > ul {
	list-style: none;
	margin: 15px 0 0 0;
	padding: 0;

	li {
		border-top: 1px solid $gray-light;
		display: flex;
		justify-content: space-between;
		overflow: auto;
		padding: 10px 0;
		position: relative;

		em {
			color: $gray-text-min;
			display: block;
			font-size: 11px;
		}

		label {
			background: $gray;
			border-radius: 2px;
			color: $white;
			display: block;
			font-size: 12px;
			margin: 0 10px 0 0;
			padding: 10px 5px;
			text-align: center;
		}

		strong {
			color: $gray-text-min;
			font-weight: normal;
		}

		&.is-disabled {
			opacity: 0.2;
			cursor: not-allowed;
		}
	}

	.dns__list-type {
		min-width: 60px;
	}

	.dns__list-info {
		width: 100%;
		word-break: break-all;
	}

	.dns__list-remove {
		text-align: right;
		width: 100px;
	}
}

.dns__add-new {
	fieldset {
		label {
			+ select,
			+ textarea {
				width: 100%;
			}
		}
	}
}

.domain-management-email {
	.is-placeholder {
		.section-header__label {
			@include placeholder();

			&::before {
				display: none;
			}
		}

		.google-apps-user-item__email,
		.google-apps-user-item__manage-link {
			@include placeholder();
		}
	}
}

.google-apps-users-card {
	margin-bottom: 10px;
}

.google-apps-users-card__user-list {
	&.card {
		padding: 0;
		@include clear-fix;
	}
}

.google-apps-users-card__user-list-inner {
	list-style: none;
	margin: 0;

	li {
		border-top: 1px solid $gray-light;
		padding: 20px 24px;
		@include clear-fix;

		&:first-of-type {
			border-top: none;
		}

		&:last-of-type {
			border-bottom: 1px solid $gray-light;
		}
	}

	.notice {
		margin: 0;
	}
}

.google-apps-user-item__email {
	float: left;
}

.google-apps-user-item__manage-link {
	float: right;
	font-size: 13px;
}

.domain-only-site__settings-notice {
	color: darken( $gray, 20% );
	margin-top: 30px;
	text-align: center;

	&::before {
		background: lighten( $gray, 20% );
		content: '';
		display: block;
		height: 1px;
		margin: 0 auto 30px;
		width: 60px;
	}
}
